{% extends 'pages/_base.html' %}

{% block _base %}
<!-- 背景图片 -->
<img id="img_background" src="" alt="" style="width: 100%; height: 50vh; object-fit: cover; object-position: center; border: 3px solid #000; border-radius: 8px;" />

<!-- 头像和用户名 -->
<div class="d-flex align-items-center mt-4">
    <!-- 头像 -->
    <img id="img_icon" src="" alt=""
        style="width: 20vh; height: 20vh; object-fit: cover; object-position: center;
               border: 3px solid #000; border-radius: 50%;" />

    <!-- 用户名和身份信息 -->
    <div class="d-flex flex-column ml-3">
        <span class="badge badge-primary p-2 mb-2" id="username"></span>
        <span class="badge badge-secondary p-2" id="role"></span>
    </div>
</div>

<div class="alert mt-4" role="alert" id="intro"></div>

<script>
    EventLoad(async () => {
        let personalInfo = await fetchGet('{{ url_for('api.get_personal_information') }}');
        let userInfo = await fetchGet('{{ url_for('api.username') }}');

        // 设置背景图片
        let imgBackground = document.getElementById('img_background');
        imgBackground.src = personalInfo.img_background;

        // 设置头像
        let imgIcon = document.getElementById('img_icon');
        imgIcon.src = personalInfo.img_icon;

        let username = document.getElementById('username');
        username.innerText = userInfo.username;

        // 设置角色
        let role = document.getElementById('role');
        role.innerText = personalInfo.role

        // 设置个人介绍
        let intro = document.getElementById('intro');
        intro.innerText = personalInfo.intro

        let colors = [
            { bg: "#f8d7da", text: "#721c24" }, // 浅红色（警告）
            { bg: "#d4edda", text: "#155724" }, // 浅绿色（成功）
            { bg: "#cce5ff", text: "#004085" }, // 浅蓝色（信息）
            { bg: "#fff3cd", text: "#856404" }, // 浅黄色（警告）
            { bg: "#d1c4e9", text: "#4a148c" }  // 淡紫色（优雅）
        ];

        // 随机选择一种颜色
        let randomColor = colors[Math.floor(Math.random() * colors.length)];
        intro.style.backgroundColor = randomColor.bg;
        intro.style.color = randomColor.text;

        // 绑定图片上传事件
        ImageModal(imgBackground);
        ImageModal(imgIcon);

        // 上传背景图片
        await ImageUpload(imgBackground, async (file) => {
            let base64 = await toBase64(file);
            let data = {'img_background': base64};
            let res = await fetchPost('{{ url_for('api.update_personal_img_background') }}', data);
            flash(res.msg);
        });

        // 上传头像
        await ImageUpload(imgIcon, async (file) => {
            let base64 = await toBase64(file);
            let data = {'img_icon': base64};
            let res = await fetchPost('{{ url_for('api.update_personal_img_icon') }}', data);
            flash(res.msg);
        });
    });
</script>
{% endblock %}
